$(function () {
    var $data_category = $("area[data-category]");
    // 显示悬浮窗
    function showInform(categoryId, event) {
        var informDiv = $("#inform");

        // 设置悬浮窗位置
        var x = event.pageX + 10; // 鼠标横坐标加偏移
        var y = event.pageY + 10; // 鼠标纵坐标加偏移
        informDiv.css({ left: x + "px", top: y + "px" });

        // 发起 AJAX 请求获取数据
        $.ajax({
            url: "/csu_javaweb_group_assignment/categoryShowJsServlet",
            type: "GET",
            data: { categoryId: categoryId }, // 将 categoryId 作为参数传递给后端
            dataType: "json", // 确保返回的数据为 JSON 格式
            success: function (response) {
                informDiv.empty(); // 清空悬浮窗内容

                if (Array.isArray(response) && response.length > 0) {
                    // 遍历响应数据并动态生成内容
                    response.forEach((item) => {
                        const productInfo = `
                        <div style="margin-bottom: 1px;">
                            <strong>Product ID:</strong> ${item.productId}<br>
                            <strong>Product Name:</strong> ${item.name}<br>
                        </div>`;
                        informDiv.append(productInfo);
                    });
                } else {
                    informDiv.text("没有找到该商品");
                }

                informDiv.fadeIn(200); // 显示悬浮窗
            },
            error: function () {
                informDiv.text("加载数据失败").fadeIn(200); // 加载失败提示
            },
        });
    }

    // 隐藏悬浮窗
    function hideInform(event) {
        var informDiv = $("#inform");
        var x = event.pageX;
        var y = event.pageY;

        // 获取悬浮窗的绝对位置
        var divOffset = informDiv.offset();
        var divx1 = divOffset.left;
        var divy1 = divOffset.top;
        var divx2 = divx1 + informDiv.outerWidth(); // 悬浮窗右边界
        var divy2 = divy1 + informDiv.outerHeight(); // 悬浮窗下边界

        // 如果鼠标移出了悬浮窗范围，则隐藏悬浮窗
        if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
            informDiv.fadeOut(200); // 隐藏悬浮窗
        }
    }

    // 为所有带有 data-category 属性的区域绑定事件监听
    $($data_category).on("mouseover", function (data) {
        var categoryId = $(this).data("category"); // 获取 data-category 的值
        showInform(categoryId, data);
    });

    $($data_category).on("mouseout", function (data) {
        hideInform(data);
    });
});
